@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  @media screen(lg) {
    .bg-hero {
      @apply w-[2000px] h-[300px];
      @apply absolute rounded-l-full top-52 bg-softBlue left-[30%];
    }
    .bg-tabs {
      @apply w-[2000px] h-[300px];
      @apply absolute rounded-r-full top-60 bg-softBlue right-[60%];
    }
  }
  .tab {
    @apply cursor-pointer;
  }
  .ficon:hover {
    filter: invert(53%) sepia(38%) saturate(3303%) hue-rotate(326deg)
      brightness(101%) contrast(96%);
  }
  .hamburger {
    @apply cursor-pointer w-6 h-6 transition-all duration-[.25s] relative;
  }
  .hamburger-top,
  .hamburger-middle,
  .hamburger-bottom {
    @apply absolute w-6 h-[3px] top-0 left-0 bg-black transition-all duration-500 rotate-0;
  }
  .hamburger-middle {
    @apply translate-y-[7px];
  }
  .hamburger-bottom {
    @apply translate-y-[14px];
  }
  .open {
    @apply rotate-90 translate-y-0;
    @apply fixed top-[50px] right-[25px];
  }
  .open .hamburger-top {
    @apply rotate-45 translate-y-[6px] bg-white;
  }
  .open .hamburger-middle {
    @apply hidden;
  }
  .open .hamburger-bottom {
    @apply -rotate-45 translate-y-[6px] bg-white;
  }
}
